<style lang="less" scoped>
    .workorder {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        //display: flex;
    }
</style>
<template>
    <div class="workorder">
        <!--<card-table
            cardtitle="工单列表"
            addbuttext="新建工单"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="myorderdata">
        </card-table>-->
        <my-card cardtitle="当前订单：" :showright="false">
            <Table :columns="ordercolumns" :data="myorderdata" style="margin-bottom: 10px"></Table>
        </my-card>
        <card-table
            style="margin-top: 10px"
            cardtitle="版本信息"
            addbuttext="新建工单"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
        </card-table>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import workorderdata from './workorderdata.js'
    export default {
        name: 'workorder',
        props: ['id'],
        data () {
            return {
                ordercolumns: [
                    {
                        title: '订单编号',
                        key: 'nub',
                        width: 180
                    },
                    {
                        title: '客户订单编号',
                        key: 'customernub',
                        width: 180
                    },
                    {
                        title: '客户信息',
                        key: 'customermsg',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.customermsg.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.customermsg.nub),
                                    h('p', '名称：' + params.row.customermsg.name),
                                    h('p', '地址：' + params.row.customermsg.address),
                                    h('p', '联系人：' + params.row.customermsg.contacts),
                                    h('p', '联系电话：' + params.row.customermsg.phone)
                                ])
                            ])
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 120,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '产品',
                        key: 'product',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.product.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.product.nub),
                                    h('p', '名称：' + params.row.product.name),
                                    h('p', '单位：' + params.row.product.unit),
                                    h('p', '版本号：' + params.row.product.version)
                                ])
                            ])
                        }
                    }
                ],
                columns: [
                    {
                        title: '工单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '产品编号',
                        key: 'product',
                        render: (h, params) => {
                            return h('span', params.row.product.nub)
                        }
                    },
                    {
                        title: '产品规格',
                        key: 'product',
                        render: (h, params) => {
                            return h('span', params.row.product.norm)
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '状态',
                        key: 'type',
                        width: 130,
                        render: (h, params) => {
                            let text = '未知'
                            let style = {
                                color: 'red'
                            }
                            switch (params.row.type) {
                                case '1':
                                    text = '已生产';
                                    style.color = '#ccc'
                                    break;
                                case '3':
                                    text = '未生产';
                                    style.color = '#0000ff'
                                    break;
                                case '2':
                                    text = '计划中';
                                    style.color = '#00ff00'
                                    break;
                            }
                            return h('span', {
                                style: style
                            }, text)
                        }
                    },
                    {
                        title: '员工',
                        key: 'users',
                        width: 80,
                        render: (h, params) => {
                            let main = []
                            for (let i = 0; i < params.row.users.length; i++) {
                                main.push(h('p', (i + 1) + '：' + params.row.users[i].name + '--' + params.row.users[i].post))
                            }
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.users.length),
                                h('div', {
                                    slot: 'content'
                                }, main)
                            ])
                        }
                    }
                ],  //  表格列
                myorderdata: [
                    {
                        nub: 'GLFDMT100x1544a4',
                        customernub: 'MT44847774fsddsaFFs',
                        customermsg: {
                            nub: 'KH4584sadd1sad',
                            name: '杭州肯沃自动化有限公司2',
                            address: '浙江省杭州市西湖区莫干山路639号',
                            contacts: '房召谋',
                            phone: '13696654057'
                        },
                        number: '3000',
                        unit: '米',
                        product: {
                            nub: 'MT454564dsadaas',
                            name: '毛条044x4584454s',
                            unit: '米',
                            version: 'v1.21'
                        }
                    }
                ],
                data: workorderdata,  //  表格数据
                selectList: [
                    {
                        label: '工单编号',
                        value: 'nub'
                    },
                    {
                        label: '数量',
                        value: 'number'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'number': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '订单号',
                        key: 'nub',
                        placeholder: '输入工单编号'
                    },
                    {
                        label: '数量',
                        key: 'number',
                        placeholder: '输入工单产品数量'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        methods: {
            add () {
                console.log('customer触发了添加事件')
            },
            refresh () {
                console.log('customer触发了刷新事件')
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            console.log(this.$router)
        }
    };
</script>
